<template>
  <div class="container">
      <div class="myform">
          <div class="title">
              <h2>注册</h2>
          </div>
          <div class="submit">
              <el-form :model="registerForm" :rules="rules" ref="registerForm">
                <el-form-item prop="username">
                    <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input show-password v-model="registerForm.pwd"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="submitForm('registerForm')">立即注册</el-button>
                </el-form-item>
              </el-form>
          </div>
      </div>
  </div>
</template>

<script>
import {registerApi} from '../api/loginApi'
export default {
    data(){
        return{
            registerForm:{
                username:'',
                pwd:''
            },
            rules:{
                username:[
                    { required: true, message: '请输入注册账号', trigger: 'blur' },
                ],
                pwd:[
                    { required: true, message: '请输入注册密码', trigger: 'blur' },
                ],
            }
        }
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                registerApi(this.registerForm).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message: res.msg + '3秒后,跳转到登录页面',
                            type: 'success'
                        });
                        setTimeout(()=>{
                            this.$router.push('/login')
                        },3000)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    background: url('../../public/登陆页/homepage-photo_03.png') no-repeat center center;
    background-size:100% 100%;
    .myform{
        background-color: #fff;
        width: 380px;
        height: 320px;
        border-radius: 10px;
        position: absolute;
        left: 70%;
        top:30%;
        .title{
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 25px;
            font-weight: 800;
        }
        .submit{
            padding: 20px;
            .el-button{
                width: 100%;
                height: 40px;
            }
        }
    }
}
</style>